<script setup lang="ts">
import { myres } from '@/api/myres'
import { useRouter } from 'vue-router';
import type { Ref } from 'vue';
import { ref, onMounted, watch } from 'vue';
import { useUserStore } from '@/stores/user'
const useStore = useUserStore()

const router = useRouter()

const active: Ref<number> = ref(Number(window.localStorage.getItem('reservation'))||0);
// 导航栏返回事件
function onClickLeft() {
    router.back()
}

interface IShowMes {
    after: number
    doc: string
    hos: string
    id: number
    illness1: string
    illness2: string
    illness3: string
    kinds: string
    name: string
    position: string
    price: number
    time: string
    tit: string
    age: number
}

const showMes: Ref<IShowMes[]> = ref([])
const showM: Ref<IShowMes[]> = ref([])
onMounted(() => {
    myres({ tel: useStore.username || '' }).then(res => {
        showMes.value = res.data.data
        if (active.value === 0) {
            showM.value = showMes.value.filter((item: any) => {
                return item.tit === '0' || item.tit === '1'
            })
        } else if (active.value === 1) {
            showM.value = showMes.value.filter((item: any) => {
                return item.tit === '0'
            })
        } else if (active.value === 2) {
            showM.value = showMes.value.filter((item: any) => {
                return item.tit === '1'
            })
        } else if (active.value === 3) {
            showM.value = showMes.value.filter((item: any) => {
                return item.tit === '2'
            })
        } else {
            showM.value = showMes.value.filter((item: any) => {
                return item.tit
            })
        }
    })
})

watch(
    active,
    () => {
        // active.value = 0
        if (active.value === 0) {
            showM.value = showMes.value.filter((item: any) => {
                return item.tit === '0' || item.tit === '1'
            })
        } else if (active.value === 1) {
            showM.value = showMes.value.filter((item: any) => {
                return item.tit === '0'
            })
        } else if (active.value === 2) {
            showM.value = showMes.value.filter((item: any) => {
                return item.tit === '1'
            })
        } else if (active.value === 3) {
            showM.value = showMes.value.filter((item: any) => {
                return item.tit === '2'
            })
        } else {
            showM.value = showMes.value.filter((item: any) => {
                return item.tit
            })
        }
    },
)

const arr = ["全部", "待就诊", "待评价", "已评价", "历史"]
</script>

<template>
    <van-nav-bar title="我的预约" left-text="返回" left-arrow @click-left="onClickLeft" />
    <div class="boxset">
        <!-- 导航栏 -->
        <section>
            <van-tabs v-model:active="active">
                <van-tab v-for="val in arr" :key="val" :title="val">
                    <ul>
                        <li v-for="item in showM" :key="item.id">
                            <div>
                                <span class="name">{{ item.doc }}医生</span>&nbsp;
                                <span>{{ item.position }}</span>
                                <span class="tie" v-if="item.tit === '0'">待就诊</span>
                                <span class="tie" v-else-if="item.tit === '1'">待评价</span>
                                <span class="tit" v-else>已评价</span>
                            </div>
                            <div>
                                <span>{{ item.hos }}</span>&nbsp;
                                <span>{{ item.kinds }}</span>
                            </div>
                            <div>
                                擅长:{{ item.illness1 }},{{ item.illness2 }},{{ item.illness3 }}
                            </div>
                            <div>
                                <span>就诊人:{{ item.name }}{{ item.age ? '先生' : '女士' }}</span>&nbsp;
                                <span>{{ item.time }}</span>&nbsp;
                                <span>{{ item.after ? '上午' : '下午' }}</span>
                                <span class="tif">￥{{ item.price }}</span>
                            </div>
                        </li>
                    </ul>
                </van-tab>
            </van-tabs>
        </section>
    </div>
</template>

<style lang="scss" scoped>
.boxset {
    display: flex;
    flex-direction: column;
    overflow: auto;

    section {
        flex: 1;
    }
}

ul>li {
    height: 120px;
    width: 350px;
    background-color: whitesmoke;
    border-radius: 20px;
    margin: 10px auto;
    display: flex;
    flex-direction: column;
    justify-content: space-around;

    div {
        font-size: 14px;
        color: gray;
        margin-left: 20px;
        margin-right: 20px;
        position: relative;

        .name {
            font-weight: 700;
            color: black;
            font-size: 18px;
        }

        .tit {
            position: absolute;
            right: 0px;
        }

        .tie {
            position: absolute;
            right: 0px;
            font-size: 16px;
            color: #0379ff;
        }

        .tif {
            position: absolute;
            right: 0px;
            font-size: 16px;
            color: tomato;
        }
    }
}
</style>